<script setup>
//管理员登录页
import {ref, inject} from "vue";
import {adminLogin} from "@/res/api/admin_api.js"
import {getUserRole} from "@/res/api/admin_api.js"
import * as jwt from "jwt-decode"
// import {} from "@vicons/ionicons5"
const {toPage} = inject('toPage')
const admin = ref({
  name:null,
  password:null
})
//测试用户
const user = ref({
  order:'353762489',
  headerImg:'https://picsum.photos/seed/picsum/200/300',
  nickName:"王大锤",
  username:'1212567',
  password:'123456',
  name:'小明',
  sex:'男',
  age:'25',
  role: 'admin',
})
function confirmLoginClick(){
  adminLogin({
    username: admin.value.name,
    password: admin.value.password
  }).then((res)=>{
    console.log(res)
    if (res.status !=200){
      $message.destroyAll()
      $message.error(res.message)
    }
    sessionStorage.setItem('Authorization','Bearer\xa0'+res.data)
    // 测试用户
    sessionStorage.setItem("user",JSON.stringify(user.value))
    getUserRole()
        .then((meres)=>{
      const  a = meres.data
      if (a === 2){
        toPage('admin/course')
        $message.success("登录成功");
        return;
      }
          $message.destroyAll()
          $message.error("请不要乱搞 小心老板让你加班")
          toPage('login')

    }).catch((err)=>{

    })
    //
  })


  //

}
</script>

<template>
  <n-flex justify="center" align="center" class="login-admin">
    <n-space justify="space-between" class="login-admin-content">
      <div class="login-admin-img">
        <div class="log-admin">
          <img src="/src/assets/picture/Linter.png" alt="..." class="log-admin-img">
        </div>
        <div class="log-admin-title">
          <n-p>管理员更好管理用户信息</n-p>
        </div>
      </div>
      <n-space vertical class="login-admin-form" justify="center" align="center">
        <h2>Linter项目管理端</h2>
        <n-flex class="login-admin-form-body" align="center">
          <n-form style="width: 100%">
            <n-form-item label="用户名">
              <n-input type="text" v-model:value="admin.name" placeholder="请输入账户，以admin始"></n-input>
            </n-form-item>
            <n-form-item label="登录密码">
              <n-input type="password"  v-model:value="admin.password" placeholder="请输入密码" show-password-on="mousedown"></n-input>
            </n-form-item>
            <n-form-item>
              <n-checkbox>记住密码</n-checkbox>
            </n-form-item>
            <n-space justify="center">
              <n-button type="info"
                        color="#4c52df"
                        round
                        style="width: 9rem" @click="confirmLoginClick">确 认 登 录</n-button>
            </n-space>
          </n-form>
        </n-flex>
      </n-space>
    </n-space>
  </n-flex>
</template>

<style lang="scss" scoped>
.login-admin{
  width: 100vw;
  height: 100vh;
  background: #fff;
  &-content{
    position: relative;
    width: 81vw;
    height: 81vh;
    background: #c2e5ff;
    border-radius: 10px;
  //  阴影
    box-shadow: 0 0 10px #c2e5ff;
  }
}
.log-admin{
  position: absolute;
  left: 5rem;
  top: 3rem;
  width: 8rem;
  height: 2.4rem;
  overflow: hidden;
  .log-admin-img{
    position: relative;
    width: 100%;
    height: 100%;
  }
}
.login-admin-img{
  background: #fff url("http://qiniuyun.linter.top/Linter/Vue_img/User/%E7%AE%A1%E7%90%86%E5%91%98%E7%99%BB%E5%BD%95.jpg") no-repeat center;
  background-size: 80% 80%;
  margin: 0;
  box-sizing: border-box;
  width: 37vw;
  height: 100%;
  .log-admin-title{
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    p{
      font-weight: bold;
      font-size: 1.2rem;
    }
  }
}
.login-admin-form{
  margin: 0 auto;
  box-sizing: border-box;
  width: 42vw;
  height: 100%;
  h2{
    font-size: 1.7rem;
  }
  &-body{
    width: 32rem;
    height: auto;
    box-sizing: border-box;
    padding: 2rem 4rem;
  }
}
</style>
